<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:composite="http://java.sun.com/jsf/composite"
	xmlns:common="http://java.sun.com/jsf/composite/common">

<composite:interface>
	<composite:attribute name="ordenProd"></composite:attribute>
	<composite:attribute name="saveFormulaListner"
		method-signature="void saveFormula(javax.faces.event.ActionEvent)" />
	<composite:attribute name="saveAsNewFormulaListner"
		method-signature="void saveAsNewFormula(javax.faces.event.ActionEvent)" />
</composite:interface>

<composite:implementation>
	<h:panelGroup layout="block" styleClass="tableNoGrid" style="">
		<div class="row" style="margin-bottom: 20px;">
			<div class="col-md-2">
				<h:outputLabel value="Buscador" styleClass="pull-left"
					style="margin-right: 20px;"></h:outputLabel>
			</div>
			<div class="col-md-10">
				<p:autoComplete value="#{formulasMB.selectedFormulaStr}"
					id="formulaAutocomplete"
					completeMethod="#{formulasMB.completeFormulas}"
					forceSelection="true" styleClass="pull-left">
					<p:ajax event="itemSelect"
						listener="#{formulasMB.handleFormulaSelection}"
						update="fromulaPanel" />
				</p:autoComplete>
				<span class="glyphicon glyphicon-search pull-left"
					style="margin-left: 15px;"></span>
			</div>
		</div>
		<h:panelGroup layout="block" id="fromulaPanel">
			<div class="row">
				<div class="col-md-2">
					<p:outputLabel value="Descripcion" for="formulaDesc"
						style="margin-right: 20px;" styleClass="pull-left"></p:outputLabel>
				</div>
				<div class="col-md-10">
					<p:inputText id="formulaDesc" styleClass="pull-left"
						value="#{formulasMB.selectedFormula.description}" required="true"></p:inputText>
					<p:message for="formulaDesc" styleClass="pull-left"></p:message>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<p:dataTable style="margin-top: 20px;" var="formulaPerc"
						value="#{formulasMB.selectedFormula.formulaMps}"
						id="formulasTable" editable="true">
						<p:ajax event="rowEdit" />
						<p:ajax event="rowEditCancel" />
						<p:column headerText="Materia Prima" id="boinaCol"
							style="width:50%">
							<p:cellEditor>
								<f:facet name="output">
									<h:outputText value="#{formulaPerc.item.descripcion}" />
								</f:facet>
								<f:facet name="input">
									<p:autoComplete value="#{formulaPerc.item.descripcion}"
										style="width:100%;" completeMethod="#{formulasMB.completeMp}"
										forceSelection="true" var="materiaPrima"
										itemLabel="#{materiaPrima}"
										itemValue="#{formulaPerc.id.toString()}#{materiaPrima}">
										<p:ajax event="itemSelect"
											listener="#{formulasMB.handleMpSelection}" update="@this" />
									</p:autoComplete>
								</f:facet>
							</p:cellEditor>
						</p:column>
						<p:column headerText="Porcentaje" style="width: 41%;"
							id="porcentajeID">
							<p:cellEditor>
								<f:facet name="output">
									<h:outputText value="#{formulaPerc.percent}" />
								</f:facet>
								<f:facet name="input">
									<p:inputText value="#{formulaPerc.percent}" style="width:100%" />
								</f:facet>
							</p:cellEditor>
						</p:column>
						<p:column style="width:6%">
							<p:rowEditor />
						</p:column>
						<p:column style="width:3%;">
							<p:commandButton styleClass="btn btn-small pull-right"
								action="#{formulasMB.deleteForumlaItem(formulaPerc.id)}"
								icon="ui-icon ui-icon-trash" update="formulasTable"
								process="@this">
							</p:commandButton>
						</p:column>
					</p:dataTable>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<p:commandButton value="Agregar Materia Prima"
						style="margin-top: 10px; margin-right: 10px;" process="@this"
						actionListener="#{formulasMB.addRawMaterial}"
						icon="ui-icon ui-icon-arrowthickstop-1-s" update="fromulaPanel"></p:commandButton>
					<p:commandButton value="Guardar"
						style="margin-top: 10px; margin-right: 10px;"
						process="@this,formulaDesc"
						actionListener="#{cc.attrs.saveFormulaListner}"
						icon="ui-icon ui-icon-arrowthickstop-1-s" update="fromulaPanel"></p:commandButton>
					<p:commandButton value="Guardar Como Nuevo"
						rendered="#{formulasMB.selectedFormula != null and formulasMB.selectedFormula.id != null}"
						style="margin-top: 10px;margin-right: 10px;"
						actionListener="#{cc.attrs.saveAsNewFormulaListner}"
						icon="ui-icon ui-icon-arrowthickstop-1-s" update="fromulaPanel"></p:commandButton>
					<p:commandButton value="Activar"
						rendered="#{formulasMB.selectedFormula != null and formulasMB.selectedFormula.id != null and formulasMB.selectedFormula.state == 0}"
						style="margin-top: 10px;"
						actionListener="#{formulasMB.activateFormula}"
						icon="ui-icon ui-icon-battery-3" update="fromulaPanel"></p:commandButton>
				</div>
			</div>
		</h:panelGroup>
	</h:panelGroup>
</composite:implementation>
</html>